<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            display: flex;
            height: 100vh;
        }

        /* 左侧树形菜单样式 */
        .sidebar {
            width: 300px;
            background-color: #2c3e50;
            color: white;
            overflow-y: auto;
            border-right: 1px solid #34495e;
        }

        .tree {
            padding: 20px 0;
        }

        .tree-item {
            padding: 8px 15px;
            cursor: pointer;
            transition: background-color 0.3s;
            user-select: none;
            position: relative;
        }

        .tree-item:hover {
            background-color: #34495e;
        }

        .tree-item.active {
            background-color: #3498db;
        }

        .tree-item .icon {
            margin-right: 8px;
            font-size: 12px;
        }

        .tree-children {
            margin-left: 20px;
            display: none;
        }

        .tree-children.expanded {
            display: block;
        }

        .sub-item {
            padding: 6px 15px;
            font-size: 14px;
            border-left: 2px solid #34495e;
        }

        .sub-item:hover {
            background-color: #34495e;
            border-left-color: #3498db;
        }

        /* 右侧内容区域样式 */
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: white;
        }

        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        /* 服务概览样式 */
        .service-overview {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .service-overview h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .service-meta {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .meta-item {
            background: rgba(255, 255, 255, 0.2);
            padding: 15px;
            border-radius: 5px;
            backdrop-filter: blur(10px);
        }

        /* 控制器详情样式 */
        .controller-info {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #3498db;
        }

        .methods-grid {
            display: grid;
            gap: 15px;
        }

        .method-card {
            background: white;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .method-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .method-header {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .method-name {
            font-size: 1.2em;
            font-weight: bold;
            color: #2c3e50;
        }

        .method-id {
            background-color: #3498db;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9em;
        }

        .param-section, .return-section {
            margin: 15px 0;
        }

        .section-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #7f8c8d;
        }

        .field-table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }

        .field-table th, .field-table td {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .field-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        .example-code {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            overflow-x: auto;
        }

        /* 按钮样式 */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            margin: 5px;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-success {
            background-color: #27ae60;
            color: white;
        }

        .btn-success:hover {
            background-color: #229954;
        }

        .btn-group {
            display: flex;
            gap: 10px;
            margin: 15px 0;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #7f8c8d;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }

        .checkbox-group {
            margin: 10px 0;
        }

        .checkbox-item {
            margin: 8px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #e9ecef;
        }

        .sub-checkboxes {
            margin-left: 20px;
            margin-top: 5px;
        }

        /* 异常和推送列表样式 */
        .exception-list, .push-list {
            display: grid;
            gap: 15px;
        }

        .exception-item, .push-item {
            background: white;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .exception-code {
            background-color: #e74c3c;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9em;
            display: inline-block;
            margin-right: 10px;
        }

        .push-cmd {
            background-color: #9b59b6;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9em;
            display: inline-block;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 左侧树形菜单 -->
    <div class="sidebar">
        <div class="tree" id="serviceTree">
            <!-- 树形菜单将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content">
        <!-- 服务概览 -->
        <div id="serviceOverview" class="content-section active">
            <div class="service-overview">
                <h1 id="serviceName">服务名称</h1>
                <p id="serviceDesc">服务描述信息</p>
            </div>

            <div class="service-meta" id="serviceMeta">
                <!-- 服务元数据将通过JavaScript动态生成 -->
            </div>

            <div class="btn-group">
                <button class="btn btn-primary" onclick="showCodeGenerationModal()">代码生成</button>
                <button class="btn btn-success" onclick="exportDocumentation()">导出文档</button>
            </div>
        </div>

        <!-- 控制器详情 -->
        <div id="controllerDetail" class="content-section">
            <div class="controller-info" id="controllerInfo">
                <!-- 控制器信息将通过JavaScript动态生成 -->
            </div>

            <div class="methods-grid" id="methodsList">
                <!-- 方法列表将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 异常列表 -->
        <div id="exceptionList" class="content-section">
            <h2>异常信息</h2>
            <div class="btn-group">
                <button class="btn btn-primary" onclick="generateExceptionCode()">生成异常代码</button>
            </div>
            <div class="exception-list" id="exceptionItems">
                <!-- 异常列表将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 推送列表 -->
        <div id="pushList" class="content-section">
            <h2>推送消息</h2>
            <div class="btn-group">
                <button class="btn btn-primary" onclick="generatePushCode()">生成推送代码</button>
            </div>
            <div class="push-list" id="pushItems">
                <!-- 推送列表将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
</div>

<!-- 代码生成模态框 -->
<div class="modal" id="codeGenerationModal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>代码生成</h2>
            <button class="close-btn" onclick="closeCodeGenerationModal()">&times;</button>
        </div>

        <div class="form-group">
            <label>选择语言:</label>
            <select class="form-control" id="languageSelect">
                <option value="ts">TypeScript</option>
                <option value="c#">C#</option>
            </select>
        </div>

        <div class="form-group">
            <label>选择协议编解码器:</label>
            <select class="form-control" id="codecSelect">
                <option value="json">JSON</option>
                <option value="protobuf">Protobuf</option>
            </select>
        </div>

        <div class="form-group">
            <label>选择生成内容:</label>
            <div class="checkbox-group">
                <div class="checkbox-item">
                    <label>
                        <input type="checkbox" id="selectAllControllers" onchange="toggleAllControllers(this.checked)">
                        <strong>所有控制器</strong>
                    </label>
                    <div class="sub-checkboxes" id="controllerCheckboxes">
                        <!-- 控制器复选框将通过JavaScript动态生成 -->
                    </div>
                </div>

                <div class="checkbox-item">
                    <label>
                        <input type="checkbox" id="generatePushMessages">
                        <strong>生成推送消息</strong>
                    </label>
                </div>

                <div class="checkbox-item">
                    <label>
                        <input type="checkbox" id="generateExceptions">
                        <strong>生成异常信息</strong>
                    </label>
                </div>
            </div>
        </div>

        <div class="btn-group">
            <button class="btn btn-primary" onclick="generateSelectedCode()">生成代码</button>
            <button class="btn" onclick="closeCodeGenerationModal()">取消</button>
        </div>
    </div>
</div>

<script>
    let apiMetadata = {};
    let currentService = '';
    let currentController = '';

    // 页面加载时获取元数据
    document.addEventListener('DOMContentLoaded', function() {
        // 模拟API元数据
        apiMetadata = {
            "用户服务": {
                "meta": {
                    "description": "用户管理相关服务",
                    "version": "1.0.0",
                    "author": "开发团队"
                },
                "api_metas": {
                    "UserController": {
                        "fullClassName": "com.example.UserController",
                        "id": "1001",
                        "desc": "用户控制器",
                        "inner": false,
                        "method": [
                            {
                                "name": "getUserInfo",
                                "full_id": "1001-1",
                                "desc": "获取用户信息",
                                "id": "1",
                                "paramName": "userId",
                                "paramClassName": "String",
                                "returnTypeName": "UserInfo"
                            },
                            {
                                "name": "updateUser",
                                "full_id": "1001-2",
                                "desc": "更新用户信息",
                                "id": "2",
                                "paramName": "userInfo",
                                "paramClassName": "UserInfo",
                                "returnTypeName": "Boolean"
                            }
                        ]
                    }
                },
                "exception_metas": [
                    {
                        "code": "USER_NOT_FOUND",
                        "msg": "用户不存在"
                    },
                    {
                        "code": "USER_PERMISSION_DENIED",
                        "msg": "用户权限不足"
                    }
                ],
                "push_msg_metas": [
                    {
                        "cmd": "USER_STATUS_CHANGE",
                        "name": "用户状态变更",
                        "typeName": "UserStatus"
                    }
                ]
            },
            "订单服务": {
                "meta": {
                    "description": "订单管理相关服务",
                    "version": "1.0.0",
                    "author": "开发团队"
                },
                "api_metas": {
                    "OrderController": {
                        "fullClassName": "com.example.OrderController",
                        "id": "1002",
                        "desc": "订单控制器",
                        "inner": false,
                        "method": [
                            {
                                "name": "createOrder",
                                "full_id": "1002-1",
                                "desc": "创建订单",
                                "id": "1",
                                "paramName": "orderInfo",
                                "paramClassName": "OrderInfo",
                                "returnTypeName": "OrderResult"
                            },
                            {
                                "name": "cancelOrder",
                                "full_id": "1002-2",
                                "desc": "取消订单",
                                "id": "2",
                                "paramName": "orderId",
                                "paramClassName": "String",
                                "returnTypeName": "Boolean"
                            }
                        ]
                    }
                },
                "exception_metas": [
                    {
                        "code": "ORDER_NOT_FOUND",
                        "msg": "订单不存在"
                    },
                    {
                        "code": "ORDER_CANNOT_CANCEL",
                        "msg": "订单无法取消"
                    }
                ],
                "push_msg_metas": [
                    {
                        "cmd": "ORDER_STATUS_CHANGE",
                        "name": "订单状态变更",
                        "typeName": "OrderStatus"
                    }
                ]
            }
        };

        renderServiceTree();
        showServiceOverview(Object.keys(apiMetadata)[0]);
    });

    // 渲染服务树
    function renderServiceTree() {
        const treeContainer = document.getElementById('serviceTree');
        treeContainer.innerHTML = '';

        Object.keys(apiMetadata).forEach(serviceName => {
            // 创建服务项容器
            const serviceContainer = document.createElement('div');
            serviceContainer.className = 'service-container';

            const serviceItem = createTreeItem(serviceName, 'service', () => {
                showServiceOverview(serviceName);
            });

            // 添加子项容器
            const children = document.createElement('div');
            children.className = 'tree-children';

            const controllersItem = createTreeItem('Controllers', 'folder', () => {
                showControllers(serviceName);
            });

            const exceptionsItem = createTreeItem('Exceptions', 'folder', () => {
                showExceptions(serviceName);
            });

            const pushItem = createTreeItem('Push Messages', 'folder', () => {
                showPushMessages(serviceName);
            });

            children.appendChild(controllersItem);
            children.appendChild(exceptionsItem);
            children.appendChild(pushItem);

            // 将子项容器添加到服务项中
            serviceItem.appendChild(children);

            // 将服务项添加到容器中
            serviceContainer.appendChild(serviceItem);
            treeContainer.appendChild(serviceContainer);

            // 添加点击展开/折叠功能
            serviceItem.addEventListener('click', function(e) {
                if (e.target === this || e.target.className.includes('tree-item')) {
                    // 阻止事件冒泡，确保只处理当前服务项
                    e.stopPropagation();
                    children.classList.toggle('expanded');
                }
            });
        });
    }

    // 创建树形项目
    function createTreeItem(text, type, clickHandler) {
        const item = document.createElement('div');
        item.className = 'tree-item';
        item.innerHTML = `
                <span class="icon">${type === 'service' ? '🏠' : type === 'folder' ? '📁' : '📄'}</span>
                ${text}
            `;
        item.addEventListener('click', clickHandler);
        return item;
    }

    // 显示服务概览
    function showServiceOverview(serviceName) {
        currentService = serviceName;
        const serviceData = apiMetadata[serviceName];

        document.getElementById('serviceName').textContent = serviceName;
        document.getElementById('serviceDesc').textContent = serviceData.meta?.description || '暂无描述';

        // 渲染服务元数据
        const metaContainer = document.getElementById('serviceMeta');
        metaContainer.innerHTML = '';

        Object.keys(serviceData.meta || {}).forEach(key => {
            const metaItem = document.createElement('div');
            metaItem.className = 'meta-item';
            metaItem.innerHTML = `
                    <strong>${key}:</strong> ${serviceData.meta[key]}
                `;
            metaContainer.appendChild(metaItem);
        });

        // 显示服务概览页面
        showContentSection('serviceOverview');
    }

    // 显示控制器列表
    function showControllers(serviceName) {
        currentService = serviceName;
        const serviceData = apiMetadata[serviceName];

        // 这里可以显示控制器列表，或者直接显示第一个控制器的详情
        if (serviceData.api_metas && Object.keys(serviceData.api_metas).length > 0) {
            const firstController = Object.keys(serviceData.api_metas)[0];
            showControllerDetail(serviceName, firstController);
        }
    }

    // 显示控制器详情
    function showControllerDetail(serviceName, controllerName) {
        currentService = serviceName;
        currentController = controllerName;
        const controllerData = apiMetadata[serviceName].api_metas[controllerName];

        // 渲染控制器信息
        const controllerInfo = document.getElementById('controllerInfo');
        controllerInfo.innerHTML = `
                <h2>${controllerName}</h2>
                <p><strong>类名:</strong> ${controllerData.fullClassName}</p>
                <p><strong>路由ID:</strong> ${controllerData.id}</p>
                <p><strong>描述:</strong> ${controllerData.desc || '暂无描述'}</p>
                <p><strong>内部接口:</strong> ${controllerData.inner ? '是' : '否'}</p>

                <div class="btn-group">
                    <button class="btn btn-primary" onclick="generateFrontendCode('${serviceName}', '${controllerName}')">生成前端代码</button>
                    <button class="btn btn-success" onclick="generateRpcCode('${serviceName}', '${controllerName}')">生成RPC代码</button>
                </div>
            `;

        // 渲染方法列表
        const methodsList = document.getElementById('methodsList');
        methodsList.innerHTML = '';

        controllerData.method.forEach(method => {
            const methodCard = document.createElement('div');
            methodCard.className = 'method-card';

            methodCard.innerHTML = `
                    <div class="method-header">
                        <div class="method-name">${method.name}</div>
                        <div class="method-id">${method.full_id}</div>
                    </div>

                    <p><strong>描述:</strong> ${method.desc || '暂无描述'}</p>
                    <p><strong>路由ID:</strong> ${method.id}</p>

                    <div class="param-section">
                        <div class="section-title">请求参数</div>
                        <p><strong>参数名:</strong> ${method.paramName}</p>
                        <p><strong>参数类型:</strong> ${method.paramClassName}</p>

                        <div class="section-title">参数示例</div>
                        <div class="example-code">
                            // ${method.paramClassName} 参数示例\n
                            // 这里显示参数结构
                        </div>
                    </div>

                    <div class="return-section">
                        <div class="section-title">返回类型</div>
                        <p><strong>返回类型:</strong> ${method.returnTypeName}</p>

                        <div class="section-title">返回示例</div>
                        <div class="example-code">
                            // ${method.returnTypeName} 返回示例\n
                            // 这里显示返回数据结构
                        </div>
                    </div>
                `;

            methodsList.appendChild(methodCard);
        });

        showContentSection('controllerDetail');
    }

    // 显示异常列表
    function showExceptions(serviceName) {
        currentService = serviceName;
        const serviceData = apiMetadata[serviceName];

        const exceptionItems = document.getElementById('exceptionItems');
        exceptionItems.innerHTML = '';

        serviceData.exception_metas.forEach(exception => {
            const exceptionItem = document.createElement('div');
            exceptionItem.className = 'exception-item';
            exceptionItem.innerHTML = `
                    <div>
                        <span class="exception-code">${exception.code}</span>
                        <strong>${exception.msg}</strong>
                    </div>
                `;
            exceptionItems.appendChild(exceptionItem);
        });

        showContentSection('exceptionList');
    }

    // 显示推送消息列表
    function showPushMessages(serviceName) {
        currentService = serviceName;
        const serviceData = apiMetadata[serviceName];

        const pushItems = document.getElementById('pushItems');
        pushItems.innerHTML = '';

        serviceData.push_msg_metas.forEach(pushMsg => {
            const pushItem = document.createElement('div');
            pushItem.className = 'push-item';
            pushItem.innerHTML = `
                    <div>
                        <span class="push-cmd">${pushMsg.cmd}</span>
                        <strong>${pushMsg.name}</strong>
                    </div>
                    <p><strong>类型:</strong> ${pushMsg.typeName}</p>
                `;
            pushItems.appendChild(pushItem);
        });

        showContentSection('pushList');
    }

    // 显示内容区域
    function showContentSection(sectionId) {
        // 隐藏所有内容区域
        document.querySelectorAll('.content-section').forEach(section => {
            section.classList.remove('active');
        });

        // 显示指定的内容区域
        document.getElementById(sectionId).classList.add('active');
    }

    // 代码生成相关函数
    function showCodeGenerationModal() {
        const modal = document.getElementById('codeGenerationModal');
        modal.classList.add('active');

        // 填充控制器复选框
        const checkboxesContainer = document.getElementById('controllerCheckboxes');
        checkboxesContainer.innerHTML = '';

        const serviceData = apiMetadata[currentService];
        Object.keys(serviceData.api_metas || {}).forEach(controllerName => {
            const checkboxItem = document.createElement('div');
            checkboxItem.className = 'checkbox-item';
            checkboxItem.innerHTML = `
                    <label>
                        <input type="checkbox" class="controller-checkbox" value="${controllerName}">
                        ${controllerName}
                    </label>
                    <div class="sub-checkboxes">
                        <label><input type="checkbox" class="frontend-checkbox" value="${controllerName}"> 前端代码</label>
                        <label><input type="checkbox" class="rpc-checkbox" value="${controllerName}"> RPC代码</label>
                    </div>
                `;
            checkboxesContainer.appendChild(checkboxItem);
        });
    }

    function closeCodeGenerationModal() {
        document.getElementById('codeGenerationModal').classList.remove('active');
    }

    function toggleAllControllers(checked) {
        document.querySelectorAll('.controller-checkbox').forEach(checkbox => {
            checkbox.checked = checked;
        });
    }

    function generateSelectedCode() {
        const language = document.getElementById('languageSelect').value;
        const codec = document.getElementById('codecSelect').value;
        const generatePush = document.getElementById('generatePushMessages').checked;
        const generateExceptions = document.getElementById('generateExceptions').checked;

        const selectedControllers = Array.from(document.querySelectorAll('.controller-checkbox:checked'))
            .map(checkbox => checkbox.value);

        const frontendControllers = Array.from(document.querySelectorAll('.frontend-checkbox:checked'))
            .map(checkbox => checkbox.value);

        const rpcControllers = Array.from(document.querySelectorAll('.rpc-checkbox:checked'))
            .map(checkbox => checkbox.value);

        // 调用后端生成代码的接口
        generateCode(language, codec, selectedControllers, frontendControllers, rpcControllers, generatePush, generateExceptions);

        closeCodeGenerationModal();
    }

    function generateFrontendCode(serviceName, controllerName) {
        const language = 'ts'; // 默认TypeScript
        const codec = 'json'; // 默认JSON

        window.open(`/generator/front/${language}/${controllerName}/${codec}`, '_blank');
    }

    function generateRpcCode(serviceName, controllerName) {
        window.open(`/generator/rpc/${controllerName}`, '_blank');
    }

    function generateExceptionCode() {
        // 生成异常代码的逻辑
        alert('生成异常代码功能');
    }

    function generatePushCode() {
        // 生成推送代码的逻辑
        alert('生成推送代码功能');
    }

    function generateCode(language, codec, controllers, frontendControllers, rpcControllers, includePush, includeExceptions) {
        // 这里调用后端接口进行代码生成
        console.log('生成代码参数:', {
            language,
            codec,
            controllers,
            frontendControllers,
            rpcControllers,
            includePush,
            includeExceptions
        });

        // 实际实现中，这里会调用相应的后端接口
        alert(`代码生成请求已发送:\n语言: ${language}\n编解码器: ${codec}\n包含推送: ${includePush}\n包含异常: ${includeExceptions}`);
    }

    function exportDocumentation() {
        // 导出文档的功能
        alert('导出文档功能');
    }
</script>
</body>
</html>